← Back

ARRAY DESTRUCTURING IN JAVASCRIPT

Array destructuring is a special syntax that lets you take values from an array and save them directly into variables.

Instead of writing array indexes again and again, you can unpack the values in one line.

You will learn:

  1. what array destructuring is
  2. how the syntax works
  3. how default values work
  4. how to collect the rest of values
  5. how to skip values
  6. how to destructure arrays in function parameters
  7. why destructuring is useful

1. What is array destructuring?

Array destructuring lets you take values from an array and save them directly into variables.

Diagram 1. Main idea

Array
↓
take values out in order
↓
save them into variables

Array destructuring means:

unpack array elements into variables

2. Basic syntax

Object destructuring uses curly braces {}.

Array destructuring uses square brackets [].

The variables inside the square brackets get values from the array in order. That means:

const color = [200, 255, 100];
const [red, green, blue] = color;

console.log(`rgb(${red}, ${green}, ${blue})`); // "rgb(200, 255, 100)"

Diagram 2. How values are assigned

color = [200, 255, 100]

[red, green, blue] = color

red   ← 200
green ← 255
blue  ← 100

The values are matched by position, not by name.

3. Very important rule

With arrays, order matters.

With objects, property names matter. With arrays, the position matters.

const values = [10, 20, 30];
const [a, b, c] = values;

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

Diagram 3. Array vs object destructuring

Object destructuring
↓
match by property name

Array destructuring
↓
match by position

4. Default values

If you declare more variables than the array has elements, the extra variables get undefined.

To avoid this, you can assign default values with =. The default value is used only when the array does not have a value in that position.

const color = [200, 100, 255];
const [red, green, blue, alpha = 0.3] = color;

console.log(`rgba(${red}, ${green}, ${blue}, ${alpha})`);
// "rgba(200, 100, 255, 0.3)"

Diagram 4. Default value logic

Array has value at this position?
│
├─ yes → use real value
└─ no  → use default value

Here:

5. Partial destructuring with ...rest

Sometimes you want only the first few elements, and you want to keep the rest together in a new array.

For that, use:

...rest

This collects the remaining values into a new array. The original array does not change.

const color = [200, 255, 100];

const [red, ...otherColors] = color;

console.log(red); // 200
console.log(otherColors); // [255, 100]

Diagram 5. ...rest in arrays

color = [200, 255, 100]

[red, ...otherColors] = color

red         ← 200
otherColors ← [255, 100]

...otherColors means:

take everything that is left
and put it into a new array

6. ...rest also works with objects

The same idea can be used with objects.

You can destructure some properties into separate variables and collect the rest into a new object.

const user = {
  name: "Jacob",
  age: 32,
  email: "j.cob@mail.com",
  isOnline: true
};

const { name, isOnline, ...otherProps } = user;

console.log(name); // "Jacob"
console.log(isOnline); // true
console.log(otherProps); // { age: 32, email: "j.cob@mail.com" }

Diagram 6. ...rest with objects

user
│
├─ name
├─ age
├─ email
└─ isOnline

Take:
name, isOnline

Collect rest:
otherProps = { age, email }

The original object still stays the same. otherProps becomes a new object with the remaining properties.

7. Skipping values

Sometimes you need only one specific element from an array, for example the third one.

Because arrays work by position, you can skip unwanted elements by leaving empty places between commas.

const rgb = [200, 100, 255];

const [, , blue] = rgb;

console.log(`Blue: ${blue}`); // "Blue: 255"

Diagram 7. Skipping values

rgb = [200, 100, 255]

[, , blue] = rgb

skip first  → 200
skip second → 100
blue        → 255

The commas keep the positions.

This tells JavaScript:

8. Important note about skipping

This is possible, but in real code it is used less often than normal destructuring.

Still, it is good to know it exists.

9. Parameter destructuring with arrays

When an array is passed into a function, you can destructure it directly in the function parameter list.

Without destructuring

function printFruits(fruits) {
  console.log(fruits[0], fruits[1], fruits[2]);
}

printFruits(["apple", "banana", "orange"]);

With destructuring

function printFruits([firstFruit, secondFruit, thirdFruit]) {
  console.log(firstFruit, secondFruit, thirdFruit);
}

printFruits(["apple", "banana", "orange"]);

Both versions work, but the second one is often easier to read because the needed values are unpacked immediately.

Diagram 8. Array destructuring in function parameters

Function gets array
↓
[firstFruit, secondFruit, thirdFruit]
↓
values are unpacked immediately
↓
use simple variable names inside function

10. Why destructuring is useful

The lesson highlights several main advantages of destructuring:

Diagram 9. Advantages of destructuring

Destructuring
│
├─ less repeated code
├─ clearer variable names
├─ easier function parameters
└─ easier data extraction

Destructuring helps make code shorter without making it harder to understand.

11. Easy memory rules

[] = array destructuring
{} = object destructuring

Array destructuring
↓
works by position

Default value
↓
used when array value is missing

...rest
↓
collect remaining values

empty commas
↓
skip positions

12. Quick summary

13. Final conclusion

If you understand these ideas:

basic array destructuring
default values
...rest
skipping values
parameter destructuring

then you already have a strong base for using array destructuring in JavaScript.

This topic is very useful in real code when working with:

← Back